<template>
  <view class="booking-history">
    <!-- 预约状态标签 -->
    <view class="status-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 预约列表 -->
    <view class="booking-list">
      <view class="booking-item" v-for="(item, index) in filteredBookings" :key="index">
        <view class="venue-info">
          <image :src="item.venueImage" mode="aspectFill" />
          <view class="venue-detail">
            <view class="venue-name">{{ item.venueName }}</view>
            <view class="booking-date">{{ item.date }} {{ item.timeSlot }}</view>
          </view>
        </view>

        <view class="booking-status" :class="item.status">
          {{ getStatusText(item.status) }}
        </view>

        <view class="booking-actions">
          <view class="price">¥{{ item.price }}</view>
          <view class="action-btns">
            <view 
              class="btn cancel" 
              v-if="item.status === 'pending'"
              @tap="cancelBooking(item)"
            >取消预约</view>
            <view 
              class="btn contact"
              @tap="contactService(item)"
            >联系客服</view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredBookings.length === 0">
        <image src="/static/empty.png" mode="aspectFit" />
        <text>暂无预约记录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const tabs = ['全部', '待确认', '已确认', '已取消']
const currentTab = ref(0)

// 模拟预约数据
const bookings = ref([
  {
    id: 1,
    venueName: '玫瑰庄园',
    venueImage: 'https://img.freepik.com/free-photo/wedding-ceremony-garden_1303-11466.jpg',
    date: '2024-06-15',
    timeSlot: '下午场',
    price: 19999,
    status: 'pending'
  },
  {
    id: 2,
    venueName: '海边教堂',
    venueImage: 'https://img.freepik.com/free-photo/beautiful-wedding-ceremony-beach_1232-3083.jpg',
    date: '2024-07-20',
    timeSlot: '上午场',
    price: 29999,
    status: 'confirmed'
  }
])

// 根据状态筛选预约
const filteredBookings = computed(() => {
  if (currentTab.value === 0) return bookings.value
  const statusMap = ['', 'pending', 'confirmed', 'cancelled']
  return bookings.value.filter(item => item.status === statusMap[currentTab.value])
})

// 切换标签
const switchTab = (index) => {
  currentTab.value = index
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待确认',
    confirmed: '已确认',
    cancelled: '已取消'
  }
  return statusMap[status]
}

// 取消预约
const cancelBooking = (booking) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消该预约吗？',
    success: (res) => {
      if (res.confirm) {
        booking.status = 'cancelled'
        uni.showToast({
          title: '取消成功',
          icon: 'success'
        })
      }
    }
  })
}

// 联系客服
const contactService = (booking) => {
  uni.makePhoneCall({
    phoneNumber: '400-888-8888'
  })
}
</script>

<style scoped>
.booking-history {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.status-tabs {
  display: flex;
  background-color: #fff;
  padding: 20rpx 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #ff4d4f;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #ff4d4f;
}

.booking-list {
  padding: 20rpx;
}

.booking-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.venue-info {
  display: flex;
  margin-bottom: 20rpx;
}

.venue-info image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
}

.venue-detail {
  flex: 1;
  margin-left: 20rpx;
}

.venue-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.booking-date {
  font-size: 28rpx;
  color: #666;
}

.booking-status {
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.booking-status.pending {
  color: #faad14;
}

.booking-status.confirmed {
  color: #52c41a;
}

.booking-status.cancelled {
  color: #999;
}

.booking-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2rpx solid #f5f5f5;
  padding-top: 20rpx;
}

.price {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
}

.action-btns {
  display: flex;
  gap: 20rpx;
}

.btn {
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}

.btn.cancel {
  border: 2rpx solid #999;
  color: #666;
}

.btn.contact {
  background-color: #ff4d4f;
  color: #fff;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  color: #999;
}

.empty-state image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}
</style> 